<script setup lang="ts">
import TabBar from '@/components/Tabbar/index.vue';
definePageMeta({
  layout: 'default2',
  title: '任务列表',
  i18n: 'menu.taskList',
})
const { t } = useI18n();
const active = ref(0);
const tabArr = [
  {
    id: 0,
    name: '全部'
  },
  {
    id: 1,
    name: '每日'
  },
  {
    id: 2,
    name: '已完成'
  },
  {
    id: 3,
    name: '未完成'
  },
]
const recordsArr = ref([
  {
    id: 1,
    name: 'LUVAlogo',
    gameName: 'LEPRECHAUN RICHES',
    bet: '25.20',
    time: '2025-04-23 17:00:00',
    win: '6254.20',
    show: true,
    number: '17228022222222221'
  },
  {
    id: 2,
    name: 'LUVAlogo',
    gameName: 'LEPRECHAUN RICHES',
    bet: '25.20',
    time: '2025-04-23 17:00:00',
    win: '6254.20',
    show: true,
    number: '17222222222222201'
  },
  {
    id: 3,
    name: 'LUVAlogo',
    gameName: 'LEPRECHAUN RICHES',
    bet: '25.20',
    time: '2025-04-2317:00:00',
    win: '6254.20',
    show: true,
    number: '17222222222222801'
  },
  {
    id: 4,
    name: 'LUVAlogo',
    gameName: 'LEPRECHAUN RICHES',
    bet: '25.20',
    time: '2025-04-23 17:00:00',
    win: '6254.20',
    show: true,
    number: '17222222222222801'
  },
])
const copy = () => {
  // const orderNumber = arr.value[0].orderNumber;
  // navigator.clipboard.writeText(orderNumber)
  //     .then(() => {
  //         showSuccessToast('订已复制');
  //     })
  //     .catch(err => {
  //         showFailToast('复制失败');
  //     });
};
</script>

<template>
  <div mx-auto text-16 text-dark dark:text-white>
    <div>
      <TabBar :tabs="tabArr" :activeIndex="active" @updateActiveIndex="active = $event" :offset-top="46" />
      <!-- 主体内容 -->
      <div class="mx-10">
        <div v-if="active == 0">
          <!-- 每条记录 -->
          <div class="p-10 pt-0 bg-#ffffff rounded-10">
            <div class="flex items-center justify-between  p-10  my-10 border-b-1 border-#f6f6f6">
              <div class="flex items-start">
                <img src="/img/task1.png" alt="" class="w-24 mr-10">
                <div>
                  <div class="text-14 mb-10">任务描述</div>
                  <div class="text-14 color-dark">进度：<span class="text-#149eff">100</span>/10000</div>
                </div>
              </div>
              <div class="text-right">
                <div class=" font-bold ">99999</div>
                <div class="text-12 color-#b1b0be mb-5">需1倍数流水</div>
                <div class="px-8 py-2  text-10 rounded-full border-1 bg-#149eff text-#ffffff">立即领取</div>
              </div>
            </div>
            <div class="flex items-center justify-between  p-10  my-10 border-b-1 border-#f6f6f6">
              <div class="flex items-start">
                <img src="/img/task1.png" alt="" class="w-24 mr-10">
                <div>
                  <div class="text-14 mb-10">任务描述</div>
                  <div class="text-14 color-dark">进度：<span class="text-#149eff">100</span>/10000</div>
                </div>
              </div>
              <div class="text-right">
                <div class=" font-bold ">99999</div>
                <div class="text-12 color-#b1b0be mb-5">需1倍数流水</div>
                <div class="text-#e99982 text-10 ">等待完成</div>
              </div>
            </div>
          </div>
        </div>
        <div v-if="active == 1">

        </div>
        <div v-if="active == 2">

        </div>
        <div v-if="active == 3">

        </div>
        <div v-if="active == 4">

        </div>
        <div class="text-#84889f text-10 text-center mt-10">{{t("common.no_more")}}</div>
      </div>
    </div>
  </div>
</template>
<style lang="css" scoped>
.active-tab {
  color: #539cd6;
  border: 1px solid #539cd6;
  background: #ffffff;
  padding: 0;
}
</style>